<template>
  <div class="article-list-container">
    <el-button
      type="primary"
      @click="goAdd"
      class="btn-position"
      size="small"
    >新增动态</el-button>
    <el-row>
      <el-col
        :span="6"
        v-for="(item, index) in listData"
        :key="index"
        :offset="index % 3 > 0 ? 1 : 0"
        style="margin-bottom: 16px"
      >
        <el-card :body-style="{ padding: '0' }">
          <figure class="figures-sty">
            <img
              :src="domain + item.src"
              class="image"
              width="382"
            />
          </figure>
          <div style="padding: 14px;">
            <span class="one-line">{{item.title}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.time }}</time>
              <div class="button">
                <el-button
                  type="text"
                  @click="goDetail(item._id,'/articleUpdate')"
                >修改</el-button>
                <el-button
                  type="text"
                  @click="goDetail(item._id,'/articleDetail')"
                >详情</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteItem(item._id)"
                >删除</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-pagination
      :page-size="pageSize"
      :current-page.sync="pageNum"
      :total="total"
      @current-change="fetchData"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "ArticleList",
  data() {
    return {
      listData: [],
      pageSize: 6,
      pageNum: 0,
      total: 0,
    };
  },
  activated() {
    this.fetchData();
  },
  methods: {
    deleteItem(id) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.axios.post("/article/delete", {
            id,
          });
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.fetchData();
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 获取文章列表数据
     */
    fetchData() {
      console.log(this.pageNum);
      this.axios
        .get("/article", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum - 1,
          },
        })
        .then((res) => {
          this.listData = res.data.data.map((val) => {
            return {
              ...val,
              src: val.src.split(".cn")[1] ? val.src.split(".cn/")[1] : val.src,
            };
          });
          this.total = res.data.total;
        });
    },
    goAdd() {
      this.$router.push("/articleAdd");
    },
    /**
     * 跳转文章详情
     * @param id
     */
    goDetail(id, path) {
      this.$router.push({
        path,
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.article-list-container {
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
}
</style>

<style lang="scss" scoped>
.article-list-container {
  position: relative;
  padding: 16px;
  .figures-sty {
    width: 100%;
    height: 150px;
    overflow: hidden;
  }
  .btn-position {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
  }
  .one-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>